<#include "/layout/header.ftl"/>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li class="active">课程管理</li>
        </ol>
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <div class="btn-group hidden-xs" id="toolbar">
                        <@shiro.hasPermission name="course:add">
                        <button id="btn_add" type="button" class="btn btn-default" title="新增课程">
                            <i class="fa fa-plus"></i> 新增课程
                        </button>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="course:batchDelete">
                            <button id="btn_delete_ids" type="button" class="btn btn-default" title="删除选中">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        </@shiro.hasPermission>
                    </div>
                    <table id="tablelist">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "/layout/footer.ftl"/>
<!--/弹框-->
<!--添加学院弹框-->
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">添加课程</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate>
                    <input type="hidden" name="id">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseName">课程名称: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="courseName" id="courseName" required="required" placeholder="请输入课程名称"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseCode">课程编码: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="courseCode" id="courseCode" required="required" placeholder="请输入课程编码"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseType">课程类型: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select name="courseType" id="courseType" required="required" class="form-control col-md-7 col-xs-12">
                                <option value="">请选择</option>
                                <option value="必修">必修</option>
                                <option value="选修">选修</option>
                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseStatus">课程状态: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select name="courseStatus" id="courseStatus" required="required" class="form-control col-md-7 col-xs-12">
                                <option value="">请选择</option>
                                <option value="正常">正常</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="schoolId">所属院校: </label>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <select id="schoolId" name="schoolId" class="form-control col-md-5 col-xs-5">
                                <option value="">请选择</option>
                                <@zhydTag method="schoolSelect">
                                    <#if schoolSelect?? && schoolSelect?size gt 0>
                                        <#list schoolSelect as item>
                                            <option value="${item.id?c}">${item.schoolName}</option>
                                        </#list>
                                    <#else>
                                        <option value="">无</option>
                                    </#if>
                                </@zhydTag>
                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="teacherId">所属院校: </label>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <select id="teacherId" name="teacherId" class="form-control col-md-5 col-xs-5">
                                <option value="">请选择</option>
                                <@zhydTag method="teacherSelect">
                                    <#if teacherSelect?? && teacherSelect?size gt 0>
                                        <#list teacherSelect as item>
                                            <option value="${item.id?c}">${item.username}</option>
                                        </#list>
                                    <#else>
                                        <option value="">无</option>
                                    </#if>
                                </@zhydTag>
                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="termId">所属学年: </label>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <select id="termId" name="termId" class="form-control col-md-5 col-xs-5">
                                <option value="">请选择</option>
                                <@zhydTag method="termSelect">
                                    <#if termSelect?? && termSelect?size gt 0>
                                        <#list termSelect as item>
                                            <option value="${item.id?c}">${item.termName}</option>
                                        </#list>
                                    <#else>
                                        <option value="">无</option>
                                    </#if>
                                </@zhydTag>
                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="courseTime">上课时间: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="courseTime" id="courseTime" placeholder="上课时间"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="coursePlace">上课地点: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="coursePlace" id="coursePlace" placeholder="上课地点"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary addOrUpdateBtn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/添加用户弹框-->
<script>
    /**
     * 操作按钮
     * @param code
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(code, row, index) {
        console.log('${user.userType}');
        var type = '${user.userType}';
        if(type != 'ROOT'){
            $('#toolbar').css('display','none');
        }
        var trId = row.id;
        var operateBtn = [
        ];
        if(type == 'ROOT'){
            operateBtn.push('<@shiro.hasPermission name="course:edit"><a class="btn btn-xs btn-primary btn-update" data-id="' + trId + '"><i class="fa fa-edit"></i>编辑</a></@shiro.hasPermission>');
            operateBtn.push('<@shiro.hasPermission name="course:delete"><a class="btn btn-xs btn-danger btn-remove" data-id="' + trId + '"><i class="fa fa-trash-o"></i>删除</a></@shiro.hasPermission>');
        }
        if(type == 'TEACHER'){
            operateBtn.push('<@shiro.hasPermission name="course:edit"><a class="btn btn-xs btn-primary btn-update" data-id="' + trId + '"><i class="fa fa-edit"></i>编辑</a></@shiro.hasPermission>');
        }
        if(type == 'STUDENT'){
            if(1 == row.isSelect){
                operateBtn.push('<@shiro.hasPermission name="course:chooseCourse"><a class="btn btn-xs btn-primary btn-chooseCancel" data-id="' + trId + '"><i class="fa fa-edit"></i>取消选课</a></@shiro.hasPermission>');
            }else{
                operateBtn.push('<@shiro.hasPermission name="course:chooseCourse"><a class="btn btn-xs btn-primary btn-chooseCourse" data-id="' + trId + '"><i class="fa fa-edit"></i>选课</a></@shiro.hasPermission>');
            }
        }
        return operateBtn.join('');
    }

    $(function () {
        var options = {
            url: "/course/list",
            getInfoUrl: "/course/get/{id}",
            updateUrl: "/course/edit",
            removeUrl: "/course/remove",
            createUrl: "/course/add",
            saveRolesUrl: "/course/saveUserRoles",
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'courseName',
                    title: '课程名称',
                    editable: true,
                }, {
                    field: 'courseCode',
                    title: '课程编码',
                    editable: false
                }, {
                    field: 'courseType',
                    title: '课程类型',
                    editable: true
                }, {
                    field: 'courseStatus',
                    title: '课程状态',
                    editable: true
                }, {
                    field: 'schoolName',
                    title: '所属院校',
                    editable: true
                },{
                    field: 'teachName',
                    title: '教师名称',
                    editable: true
                }, {
                    field: 'termName',
                    title: '所属学年',
                    editable: true
                }, {
                    field: 'courseTime',
                    title: '上课时间',
                    editable: true
                }, {
                    field: 'coursePlace',
                    title: '上课地点',
                    editable: true
                }, {
                    field: 'operate',
                    title: '操作',
                    formatter: operateFormatter //自定义方法，添加操作按钮
                }
            ],
            modalName: "课程"
        };
        //1.初始化Table
        $.tableUtil.init(options);
        //2.初始化Button的点击事件
        $.buttonUtil.init(options);


        $('#tablelist').on('click', '.btn-chooseCourse', function () {
            var $this = $(this);
            var id = $this.attr("data-id");
            $.ajax({
                async: false,
                type: "POST",
                data: {'id': id},
                url: '/course/chooseCourse',
                success: function (json) {
                    $.tool.ajaxSuccess(json);
                    $.tableUtil.refresh();
                },
                error: $.tool.ajaxError
            });
        });

        $('#tablelist').on('click', '.btn-chooseCancel', function () {
            var $this = $(this);
            var id = $this.attr("data-id");
            $.ajax({
                async: false,
                type: "POST",
                data: {'id': id},
                url: '/course/chooseCancel',
                success: function (json) {
                    $.tool.ajaxSuccess(json);
                    $.tableUtil.refresh();
                },
                error: $.tool.ajaxError
            });
        });
    });
</script>